<template>
  <div>
    <div class="row">
      <div class="text-subtitle2 q-pa-sm" v-show="topics.length > 0">最近更新</div>
      <q-space/>
      <!-- <q-item class="" dense clickable to="/topic">全部</q-item> -->
    </div>
    <div>
      <div class="cursor-pointer topicList ellipsis" flat
           v-for="(topic, index) in topics" :key="topic._id" :label="topic.title">
        <a class="text-left" :href="'/km/article?id=' + topic._id">
          <span class="" style="">
            {{ index + 1 }}.&nbsp;
          </span>
          <span class="" style="">{{ topic.title }}</span>
        </a>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import iContent from 'src/api/content'
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'NewestComponents',
  data () {
    return {
      topics: []
    }
  },
  async mounted () {
    const topics = await iContent.getList()
    this.topics = topics.slice(0, 6)
  },
  methods: {}
})

</script>

<style lang="scss">
.topicList {
  padding-left: 8px;
  margin-bottom: 10px;
  height: 1.4em;
  line-height: 1.4em;
  background-color: white;
}

a, a:visited {
  color: #666;
  text-decoration: none;
}

a:hover, a:active, a:focus {
  font-weight: normal;
}
</style>
